<template>
  <div>
    <div class="segmented-control">
      <div v-for="(item, index) of barData" :key="item.tag">
        <input type="radio" name="radio2" v-model="checkValue" />
        <label :for="`tab-${item}`" class="itemclass" @click="moveControl(item)">
          <p>{{ item.content }}</p>
        </label>
      </div>
      <div class="segmented-control__color" ref="conRef"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Item } from "ant-design-vue/lib/menu"
import { ref, watch,watchEffect,computed } from "vue"
import { useRoute } from "vue-router"

const router = useRoute()
const emit = defineEmits(['update:modelValue'])
const props = withDefaults(
  defineProps<{
    size?: string
    barData?: any
  }>(), {
  size: 'medium',
  barData: [
    {
      title: 'tab 1',
      content: '发现🎶',
      name: 'discover',
      tag:1
    },
    {
      title: 'Tab 2',
      content: '我の🎵',
      name: 'main',
      tag:2
    },
    {
      title: 'Tab 3',
      content: 'EASON',
      name: 'eason',
      tag:3
    },
    {
      title: 'Tab 4',
      content: '音乐馆',
      name: 'music',
      tag:4
    },
    {
      title: 'Tab 5',
      content: 'Others',
      name: 'other',
      tag:5
    },
  ]
}
)
const conRef = ref<HTMLElement | null>(null)
const test:any =ref()
const checkValue = ref('')
watchEffect(()=>{
    checkValue.value =router.fullPath.split('/')[1]
})



watch(checkValue, (newVal) => {
  emit('update:modelValue', newVal)

})


const moveControl = (item: any) => {
  checkValue.value = item.name
  if (conRef.value) {
    // if(item.name !== router.fullPath.split('/')[1]){
    // const test =  computed(()=>item.tag)
    // conRef.value.style.transform = `translateX(${(test.value - 1) * 110}px)`
    // }


    conRef.value.style.transform = `translateX(${(item.tag - 1) * 110}px)`
    conRef.value.style.transition = "transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
  }
}
const barSum = props.barData.length
const setSizeStyle = (size?: string) => {
  const containerStyle = {
    width: size === 'medium' ? `${(barSum / 3) * 340}px` : '250px',
    height: size === 'medium' ? '70px' : '40px',
    fontSize: size === 'medium' ? '25px' : '15px'
  }
  return containerStyle
}
//
const styleData = setSizeStyle(props.size)

const { height: th, width: tw, fontSize: fs } = styleData
</script>
<style lang="less" scoped>
/*  SEGMENTED-CONTROL */
.segmented-control {
  width: v-bind(tw);
  height: 70px;
  box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2, -0.2rem -0.2rem 0.5rem @white;
  border-radius: 1rem;
  margin-left: 150px;
  display: flex;
  align-items: center;
  position: relative;
  transform: skewX(-12deg);
}
.segmented-control input {
  display: none;
}
.segmented-control > input:checked + label {
  transition: all 0.5s ease;
  color: @primary;
}
.itemclass,
.itemclass ~ label {
  width: 110px;
  height: 3.6rem;
  font-size: v-bind(fs);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: @greyDark;
  transition: all 0.5s ease;
  font-weight: 650;
  transform: skewX(12deg);
}
.itemclass:hover,
.itemclass ~ label:hover {
  color: @primary;
}

.segmented-control__color {
  position: absolute;
  height: 3.4rem;
  width: 110px;
  margin-left: 0.3rem;
  border-radius: 0.8rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem @greyLight-2,
    inset -0.2rem -0.2rem 0.5rem @white;
  pointer-events: none;
}
</style>
